<template>
	<nav class="navbar navbar-fixed-top navbar-default" style="border:0; ">
		<div class="container-fluid" style="padding: 0;" >
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="navbar-collapse">
				<ul class="nav navbar-nav navbar-left">
					<li class="dropdown" style="padding: 15px 45px;background: #3C4867">
						<img src="/images/logo.png" width="110px">
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right" style="padding-right: 20px;">
					<li id="navbar" style="height: 55px;"><a href="javascript:">App下载</a>
						<div class="erweima" style="position: absolute;width: 250px;left: 0px;top: 55px;height: 160px;line-height: 120px;background: #f5f5f5;padding-left: 20px;">
							<img width="100px" style="margin-right: 5px" src="/images/android.png" alt="">
							<img width="100px" src="/images/ios.png" alt="">
						</div>
					</li>
					<li><a href="javascript:">技术支持</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user ? user.name : '' }}
							<span class="caret" style="padding-right: 0;"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#" @click="logout()">注销登录</a></li>
							<li><a href="#" @click="showModifyPassword(true)">修改密码</a></li>
						</ul>
					</li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import $ from 'jquery'
	export default {
		data () {
			return {}
		},
		methods: {
			...mapActions([
				'logout',
				'showModifyPassword'
			])
		},
		watch: {
			/**
			 * 当access_token的state发生变化时
			 * 说明用户登录信息验证成功，并且拿到了access_token
			 * 此时调用fetchProfile 这个action 获取用户信息
			 */
			access_token (value) {
				if (!value) {
					this.$router.replace({
						path: '/login'
					})
				}
			}
		},
		computed: {
			...mapState ({
				access_token: state => state.account.access_token,
				user: state => state.account.user,
				showModifyPasswordForm: state => state.account.showModifyPasswordForm
			})
		}
	}
	$(".appMa").hover(function(){
			$(".erweima").show()
	})
</script>

<style lang="scss">
	.navbar {
		border-radius: 0;
		border-right: none;
		border-left: none;
		border-bottom: 1px solid rgb(211, 224, 233);
		margin-bottom: 0;
	}
	.erweima{
		display:none;
		padding-top: 10px;
	}
	#navbar:hover{
		background: #f5f5f5;
	}
	#navbar:hover .erweima{
		display:block;
	}

</style>
